<template>
  <div class="chart">
    <!-- 定义一个宽高的DOM 容器 用于显示柱状图-->
     <div ref="barChart" style="width: 600px;height: 400px;"></div>

     <!-- 饼图容器 -->
      <div ref="pieChart" style="width:600px;height:400px;"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import * as echarts from 'echarts'


// 引用页面渲染后的DOM 元素
const barChart = ref<HTMLDivElement>();


// 挂载后，创建EChart 实例
onMounted(()=>{
    // 初始化 echarts 实例
    const myChart = echarts.init(barChart.value)
    // 绘制图表
myChart.setOption({
  title: { //标题
    text: 'ECharts 入门示例', //主标题文本
    textStyle: { //主标题样式
        color: '#f00'
    }
  },
  tooltip: {},  //提示工具 ，鼠标移入柱状图型内有提示
  xAxis: { //X轴上显示内容
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },

  yAxis: {},   //y轴上的配置
  legend:{
   data:["销量","折扣"]
  },
  series: [   //系列
    { //系列配置
      name: '销量',  //系列名称
      type: 'bar',  //系列类型
      data: [5, 20, 36, 10, 10, 20] //系列数据
    },
    { //系列配置
      name: '折扣',  //系列名称
      type: 'bar',  //系列类型
      data: [10, 9, 5, 8, 8, 6,7] //系列数据
    }
  ]
});
})


// 模拟网络请求，查询出当月消费数据后，绘制饼图
const pieChart = ref<HTMLDivElement>();

const drawPieChart = async ()=>{
    setTimeout(()=>{
        // 模拟服务端返回的数据
        const data = [
            {cost:700,title:"生活费"},
            {cost:480,title:'交通费'},
            {cost:320,title:"通信费"},
            {cost:500,title:"培训费"},

            {cost:998,title:"其他"}
        ]

        //初始化echarts 实例
        const pieChartIns = echarts.init(pieChart.value)
        // 配置
        pieChartIns.setOption({
            title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data:data.map(item=>({
        name:item.title,
        value:item.cost
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
        })

    },2000)
}
drawPieChart()
</script>

<style lang="less" scoped>

</style>
